<template>
  <div>
    <!-- 树形结构 -->
    <el-tree
      :data="treenData" 
      show-checkbox
      default-expand-all
      node-key="menuId"
      ref="tree"
      highlight-current
      :props="defaultProps"
      :default-checked-keys="checkList">  <!--default-checked-keys设置默认展开和默认选中的节点 -->
    </el-tree>
  </div>
</template>
<script>
import { getMenu } from "../../api/menu.js";
import { AssingPermissonJS } from "../../api/permission.js";
import { getOnGetMenuId } from "../../api/permission.js";
export default {
  props: {
    roleId: Number,
  },
  data() {
    return {
      treenData: [],  //菜单全部数据(树形)
      form: {
        roleId: "",
        permissonIds: [],
      },
      defaultProps: {
        children: "children",
        label: "menuName",
      },
      checkList:[],
    };
  },
  methods: {
    //加载菜单数据
    loadMenuDate() {
      getMenu().then((res) => {
          this.treenData = res.data.data;
      });
    },
    //获取选中的树节点数据下一个页面
    getCheckedKeys() {
      this.form.permissonIds = this.$refs.tree.getCheckedKeys();
    },
    //角色权限反填
    renGetMenuId() {
        getOnGetMenuId(this.roleId).then((res) => {
          this.checkList = res.data.data;
          this.$refs.tree.setCheckedKeys([]);
        });
    },
    //权限分配(修改)
    UpdateAssingPermissionInfo() {
      let _this = this;
      AssingPermissonJS((
        this.form = {
              roleId: this.roleId,
              permissonIds: this.form.permissonIds,
        }
      )).then((res) => {
            this.$message({
              type: "success",
              message: res.data.message,
              onClose: function () {
                _this.$emit("onAssiogClose");
              },
            });    
      });
    },
  },
  created() {
    this.loadMenuDate();//调用菜单数据
    this.renGetMenuId();
  },
};
</script>
<style>
</style>
